<template>
	<view class="flex tab-wrapper">
		<view class="tab-bar-wrapper flex justify-center align-center" :style="{transform:'translateX('+currentActive*100+'%)',width:100/tabs.length+'%'}">
			<view class="tab-bar" :class="tabBarClass"></view>
		</view>
		<view class="tab-item flex align-center justify-center"  v-for="(item,index) in tabs" @click="$emit('tabChange',index)">
			<text class="tab-text" :class="currentActive==index?'tab-item-active':''">{{item.name}}</text>
		</view>
		
	</view>
</template>

<script>
	export default{
		props:{
			tabs:{
				type:Array,
				required:true
			},
			currentActive:{
				type:Number,
				required:true
			},
			tabBarClass:{
				type:String,
				default:""
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-wrapper{
		height: 56rpx;
		position: relative;
		.tab-item{
			position: relative;
			z-index: 10;
			flex: 1;
		}
		.tab-text{
			font-size: 29rpx;
			font-weight: bold;
			color: #333333;
		}
		.tab-item-active{
			color: #fff;
		}
	}
	.tab-bar-wrapper{
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		z-index: 1;
		transition: all .3s ease;
	}
	.tab-bar{
		width: 132rpx;
		height: 100%;
		background: linear-gradient(90deg, #6185FF, #8B60FF);
		border-radius: 28rpx;
	}
</style>
